<template>
  <div class="bigss">
    <div class="ones">
      <h3>新增确诊top10</h3>
      <div id="main1" class="echss"></div>
    </div>
    <div class="ones">
      <div id="mainn1" class="echss"></div>
    </div>
    <div class="ones">
      <div id="mains1" class="echss"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    list() {
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      window.addEventListener("resizer", function () {
        myChart.resizer();
      });
      var data = [
        { code: "600519", stock: "aaa", fundPost: "21.987691" },
        { code: "000858", stock: "bbb", fundPost: "20.377176" },
        { code: "002475", stock: "ccc", fundPost: "19.127404" },
        { code: "600276", stock: "ddd", fundPost: "18.40882" },
        { code: "601318", stock: "eee", fundPost: "17.980597" },
        { code: "000661", stock: "fff", fundPost: "16.957898" },
        { code: "000333", stock: "ggg", fundPost: "15.099577" },
        { code: "300760", stock: "eee", fundPost: "14.76103" },
        { code: "300750", stock: "ttt", fundPost: "13.002175" },
        { code: "601888", stock: "fff", fundPost: "12.133536" },
      ];
      function contains(arr, dst) {
        var i = arr.length;
        while ((i -= 1)) {
          if (arr[i] == dst) {
            return i;
          }
        }
        return false;
      }

      var attackSourcesColor = [
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#EB3B5A" },
          { offset: 1, color: "#FE9C5A" },
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#FA8231" },
          { offset: 1, color: "#FFD14C" },
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#F7B731" },
          { offset: 1, color: "#FFEE96" },
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#395CFE" },
          { offset: 1, color: "#2EC7CF" },
        ]),
      ];
      var attackSourcesColor1 = [
        "#EB3B5A",
        "#FA8231",
        "#F7B731",
        "#3860FC",
        "#1089E7",
        "#F57474",
        "#56D0E3",
        "#1089E7",
        "#F57474",
        "#1089E7",
        "#F57474",
        "#F57474",
      ];
      var attaData = [];
      var attaName = [];
      var topName = [];
      data.forEach((it, index) => {
        attaData[index] = parseFloat(it.fundPost).toFixed(2);
        attaName[index] = it.stock;
        topName[index] = `${it.code} ${it.stock}`;
      });
      var salvProMax = []; //背景按最大值
      for (let i = 0; i < attaData.length; i++) {
        salvProMax.push(attaData[0]);
      }
      function attackSourcesDataFmt(sData) {
        var sss = [];
        sData.forEach(function (item, i) {
          let itemStyle = {
            color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
          };
          sss.push({
            value: item,
            itemStyle: itemStyle,
          });
        });
        return sss;
      }

      var option = {
        // backgroundColor: "#000",
        tooltip: {
          show: false,
          //   backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
          textStyle: {
            fontSize: 16,
          },
        },
        color: ["#F7B731"],
        legend: {
          pageIconSize: [12, 12],
          itemWidth: 20,
          itemHeight: 10,
          textStyle: {
            //图例文字的样式
            fontSize: 10,
            color: "#fff",
          },
          selectedMode: false,
          data: ["个人所得(亿元)"],
        },
        grid: {
          left: "5%",
          right: "2%",
          width: "80%",
          bottom: "2%",
          top: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "value",

          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisPointer: {
              label: {
                show: true,
                //margin: 30
              },
            },
            pdaaing: [5, 0, 0, 0],
            postion: "right",
            data: attaName,
            axisLabel: {
              margin: 30,
              fontSize: 10,
              align: "left",
              padding: [2, 0, 0, 0],
              color: "#000",
              rich: {
                nt1: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[0],
                  width: 13,
                  height: 13,
                  fontSize: 10,
                  align: "center",
                  borderRadius: 100,
                  lineHeight: "5",
                  padding: [0, 1, 2, 1],
                  // padding:[0,0,2,0],
                },
                nt2: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[1],
                  width: 13,
                  height: 13,
                  fontSize: 10,
                  align: "center",
                  borderRadius: 100,
                  padding: [0, 1, 2, 1],
                },
                nt3: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[2],
                  width: 13,
                  height: 13,
                  fontSize: 10,
                  align: "center",
                  borderRadius: 100,
                  padding: [0, 1, 2, 1],
                },
                nt: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[3],
                  width: 13,
                  height: 13,
                  fontSize: 10,
                  align: "center",
                  lineHeight: 3,
                  borderRadius: 100,
                  padding: [0, 1, 2, 1],
                  lineHeight: 5,
                },
              },
              formatter: function (value, index) {
                index = contains(attaName, value) + 1;
                if (index - 1 < 3) {
                  return ["{nt" + index + "|" + index + "}"].join("\n");
                } else {
                  return ["{nt|" + index + "}"].join("\n");
                }
              },
            },
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: "10",
              },
            },
            data: attackSourcesDataFmt(attaName),
          },
          {
            //名称
            type: "category",
            offset: -10,
            position: "left",
            axisLabel: {
              color: `#fff`,
              fontSize: 10,
            },
            axisLine: {
              show: false,
            },
            inverse: false,
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: ["#fff"],
              align: "left",
              verticalAlign: "bottom",
              lineHeight: 32,
              fontSize: 10,
            },
            data: topName,
          },
        ],
        series: [
          {
            zlevel: 1,
            name: "个人所得(亿元)",
            type: "bar",
            barWidth: "15px",
            animationDuration: 1500,
            data: attackSourcesDataFmt(attaData),
            align: "center",
            itemStyle: {
              normal: {
                barBorderRadius: 10,
              },
            },
            label: {
              show: true,
              fontSize: 10,
              color: "#fff",
              textBorderWidth: 2,
              padding: [2, 0, 0, 0],
            },
          },
          {
            name: "个人所得(亿元)",
            type: "bar",
            barWidth: 15,
            barGap: "-100%",
            margin: "20",
            data: salvProMax,
            textStyle: {
              //图例文字的样式
              fontSize: 10,
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: "#05325F",
                //width:"100%",
                fontSize: 10,
                barBorderRadius: 30,
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    list1() {
      var chartDom1 = document.getElementById("mainn1");
      var myChart1 = echarts.init(chartDom1);
      window.addEventListener("resize", function () {
        myChart1.resize();
      });
      var data_val = [2220, 1682, 2791, 3000, 4090, 3230, 2910],
        xAxis_val = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
      var data_val1 = [0, 0, 0, 0, 0, 0, 0];
      var option1 = {
        // backgroundColor:'#293042',
        grid: {
          left: 10,
          top: "10%",
          bottom: 20,
          right: 40,
          containLabel: true,
        },
        tooltip: {
          show: true,
          backgroundColor: "#384157",
          borderColor: "#384157",
          borderWidth: 1,
          formatter: "{b}:{c}",
          extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 1)",
        },
        legend: {
          right: 0,
          top: 0,
          data: ["距离"],
          textStyle: {
            color: "#5c6076",
          },
        },
        title: {
          text: "跑步数据检测",
          x: "4.5%",
          top: "1%",
          textStyle: {
            color: "#5c6076",
          },
        },
        xAxis: {
          data: xAxis_val,
          boundaryGap: false,
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#5c6076",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          ayisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#5c6076",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#2e3547",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#384157",
            },
          },
        },

        series: [
          {
            type: "bar",
            name: "linedemo",

            tooltip: {
              show: false,
            },
            animation: false,
            barWidth: 1.4,
            hoverAnimation: false,
            data: data_val,
            itemStyle: {
              normal: {
                color: "#f17a52",
                opacity: 0.6,
                label: {
                  show: false,
                },
              },
            },
          },
          {
            type: "line",
            name: "距离",

            animation: false,
            symbol: "circle",

            hoverAnimation: false,
            data: data_val1,
            itemStyle: {
              normal: {
                color: "#f17a52",
                opacity: 0,
              },
            },
            lineStyle: {
              normal: {
                width: 1,
                color: "#384157",
                opacity: 1,
              },
            },
          },
          {
            type: "line",
            name: "linedemo",
            smooth: true,
            symbolSize: 10,
            animation: false,
            lineWidth: 1.2,
            hoverAnimation: false,
            data: data_val,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "#f17a52",
                shadowBlur: 40,
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#f17a52",
                  },
                },
              },
            },
            areaStyle: {
              normal: {
                color: "#f17a52",
                opacity: 0.08,
              },
            },
          },
        ],
      };
      // myChart.setOption(option1);
      option1 && myChart1.setOption(option1);
    },
    list2() {
      var chartDom2 = document.getElementById("mains1");
      var myChart2 = echarts.init(chartDom2);
      window.addEventListener("resize", function () {
        myChart2.resize();
      });
     var option3 = {
        // backgroundColor: "#0f375f",
        legend: {
          orient: "vertical",
          top: "center",
          right: "5%",
          data: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6", "rose7"],
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "半径模式",
            type: "pie",
            radius: ["30%", "80%"],
            center: ["40%", "50%"],
            roseType: "radius",
            label: {
              show: true,
              normal: {
                position: "outside",
                fontSize: 16,
              },
            },
            labelLine: {
              length: 1,
              length2: 20,
              smooth: true,
            },
            data: [
              {
                value: 1,
                name: "rose1",
                itemStyle: {
                  color: "rgba(50,123,250,0.7)",
                  borderColor: "rgba(50,123,250,1)",
                  borderWidth: 3,
                },
              },
              {
                value: 2,
                name: "rose2",
                itemStyle: {
                  color: "rgba(244,201,7,0.7)",
                  borderColor: "rgba(244,201,7,1)",
                  borderWidth: 3,
                },
              },
              {
                value: 3,
                name: "rose3",
                itemStyle: {
                  color: "rgba(23,216,161,0.7)",
                  borderColor: "rgba(23,216,161,1)",
                  borderWidth: 3,
                },
              },
              {
                value: 4,
                name: "rose4",
                itemStyle: {
                  color: "rgba(122,60,235,0.7)",
                  borderColor: "rgba(122,60,235,1)",
                  borderWidth: 3,
                },
              },
              {
                value: 5,
                name: "rose5",
                itemStyle: {
                  color: "rgba(15,197,243,0.7)",
                  borderColor: "rgba(15,197,243,1)",
                  borderWidth: 3,
                },
              },
            ],
          },
        ],
      };
       option3 && myChart2.setOption(option3);
    },
  },
  created() {},
  mounted() {
    this.list();
    this.list1();
    this.list2();
  },
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.bigss {
  display: flex;
  flex-direction: column;
  //y轴
  .ones {
    // width: 100%;
    height: 305px;
    border: 1px solid rgb(246, 242, 242);
    margin-bottom: 10px;
    h3 {
      color: #fff;
      font-weight: normal;
      text-align: center;
    }
    .echss {
      width: 100%;
      height: 85%;
      //   background-color: #fff;
    }
  }
}
</style>
